<template>
  <div id="waiter">
    <div class="waiter_top">
      <el-button type="primary" @click="addProduct">添加</el-button>
    </div>
    <div class="waiter_center">
      <el-table
        :data="productList"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="编号"
          width="150"
        />
        <el-table-column
          prop="realname"
          label="姓名"
          width="150"
        />
        <el-table-column
          prop="telephone"
          label="手机号"
          width="180"
        />
        <el-table-column
          prop="idCard"
          label="身份证号"
          width="180"
        />
        <el-table-column
          prop="bankCard"
          label="银行卡号"
          width="180"
        />
        <el-table-column
          prop="registerTime"
          label="注册时间"
          width="180"
        />
        <el-table-column
          prop="status"
          label="状态"
          width="120"
        />
        <el-table-column
          prop="address"
          label="操作"
        >
          <!-- 作用于插槽 -->
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="deleteById(scope.row)">删除</el-button> &nbsp;&nbsp;
            <el-button type="text" size="mini" @click="changeProduct(scope.row)">编辑</el-button> &nbsp;&nbsp;
            <el-button type="text" size="mini" @click="details(scope.row.id)">详情</el-button>
          </template>

        </el-table-column>
      </el-table>
    </div>
    <div class="waiter_footer">
      <el-pagination
        :current-page.sync="currentPage1"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 添加/修改模态框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form ref="myform" :model="form" :rules="rules">
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
          <el-input v-model="form.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="realname">
          <el-input v-model="form.realname" autocomplete="off" />
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth" prop="telephone">
          <el-input v-model="form.telephone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="身份证号" :label-width="formLabelWidth" prop="idCard">
          <el-input v-model="form.idCard" autocomplete="off" />
        </el-form-item>
        <el-form-item label="银行卡号" :label-width="formLabelWidth" prop="bankCard">
          <el-input v-model="form.bankCard" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
          <el-input v-model="form.password" autocomplete="off" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('myform')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import qs from 'querystring'
export default {
  data() {
    return {

      input: '',
      products: [],
      total: 0,
      pageSize: 6,
      currentPage1: 1,
      currentPage2: 0,
      categorys: [],
      dialogFormVisible: false,
      form: {
        username: '',
        realname: '',
        telephone: '',
        idCard: '',
        password: '',
        bankCard: ''

      },
      formLabelWidth: '120px',
      title: '',
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在1到10个字符', trigger: 'blur' }
        ],
        realname: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在1到10个字符', trigger: 'blur' }
        ],

        telephone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { min: 5, max: 20, message: '长度在5到20个字符', trigger: 'blur' }
        ],
        idCard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { min: 5, max: 20, message: '长度在5到20个字符', trigger: 'blur' }
        ],
        bankCard: [
          { required: true, message: '请输入银行卡号', trigger: 'blur' },
          { min: 5, max: 20, message: '长度在5到20个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ]

      }
      // rules end
    }
  },

  computed: {
    // 计算属性 categoryfindAll>通过id查找 产品id匹配栏目id>匹配成功赋值
    productList: function() {
      var self = this
      var filterList = [] //eslint-disable-line
      // 1.获取所有产品信息 this.products
      // 2.获取所有栏目信息 this.waiters
      // 3.用一个产品的id匹配所有栏目id，匹配成功 找到相同id对象，把栏目信息赋给产品
      this.products.forEach((item) => {
        // item>产品对象 item.categoryId
        for (var i = 0; i < self.waiters.length; i++) {
          // waiters[i]:每个栏目信息
          if (item.categoryId == self.waiters[i].id) {//eslint-disable-line
            item.categoryName = self.waiters[i].name
            // filterList.push(item)
          }
        }
      })
      return this.products
    }
  },

  created() {
    this.findAllWaiters().then(response => {
      // 所有栏目查询完成再查询所有产品
      this.waiters = response.data.data
      this.findAll()
    })
  },
  methods: {
    // 详情按钮绑定
    details(id) {
      // 页面跳转
      this.$router.push({ path: '/waiters-details/index', query: { id: id }})
    },
    // 确定按钮绑定事件
    submitForm(formName) {
      var self = this
      // 1.获取表单数据+表单验证
      // console.log(this.form)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          // 成功：发送请求
          self.$axios.post('/waiter/saveOrUpdate', qs.stringify(self.form)).then(response => {
            if (response.data.status == 200) {//eslint-disable-line
              // 保存成功

              // 提示用户保存成功--弹框
              this.$message({
                message: '保存成功',
                type: 'success'
              })
              // 刷新页面
              self.findAll()
            } else {
              // 保存失败
              this.$message.error('保存失败')
            }
            // 失败成功均关闭模态框
            self.dialogFormVisible = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    // 添加按钮绑定事件
    addProduct() {
      // 清空编辑事件数据
      this.form = {}
      // 模态框显示
      this.dialogFormVisible = true
      this.title = '添加产品信息'
    },
    // 编辑按钮绑定时间
    changeProduct(row) {
      this.dialogFormVisible = true
      this.title = '修改员工信息'
      this.form = {

        // form中的数据，相当于重新给form赋值

        realname: row.realname,
        password: row.password,
        username: row.username,
        idCard: row.idCard,
        bankCard: row.bankCard,
        password: row.password,//eslint-disable-line
        telephone: row.telephone

      }
    },
    // 点击搜索按钮  触发搜索函数
    search() {
      // 1.获取用户输入
      if (this.input) {
        // 存在 发送请求
        this.findAll(this.input)
      } else {
        this.findAll()
      }
      this.input
    },
    // 封装查询所有栏目函数
    findAllWaiters() {
      return this.$axios.get('/waiter/findAll')
    },
    // 根据id单个删除
    deleteById(row) {
      var self = this
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户确认删除
        var id = row.id

        self.$axios.get('/waiter/deleteById', {
          params: {
            id
          }
        }).then((response) => {
          if (response.data.status == 200) {//eslint-disable-line
            // 删除成功
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            self.findAll()
          } else {
            // 删除失败
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分页查询封装函数
    findAll(name) {
      if (name) {
        // 点击了搜索
        var data = {
          page: this.currentPage2,
          pageSize: this.pageSize,
          name: name
        }
      } else {
        // 没有点击搜索
        var data = {//eslint-disable-line
          page: this.currentPage2,
          pageSize: this.pageSize
        }
      }

      this.$axios.post('/waiter/query', qs.stringify(data)).then(response => {
        this.products = response.data.data.list
        this.total = response.data.data.total
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      // 根据分页发送请求
      // console.log(val)
      // 切换分页
      this.currentPage1 = val
      this.currentPage2 = val - 1
      // 重新调用封装后的findAll函数
      this.findAll()

      // console.log(`当前页: ${val}`);
    }
  }
}
</script>
<style lang="scss" scoped>
    #waiter{
        padding:20px;
        .product_top .el-input{
            width:25%;
            margin:0 10px 0 20px
        }
    }
</style>
